<!--
 * @Author: guandeshen 295570679@qq.com
 * @Date: 2024-09-04 23:16:09
 * @LastEditors: guandeshen 295570679@qq.com
 * @LastEditTime: 2024-09-05 01:05:59
 * @FilePath: /task-admin/src/views/task/components/TaskPlans/index.vue
 * @Description: 
 * 
 * Copyright (c) 2024 by RSC, All Rights Reserved. 
-->
<template>
  <div class="content">
    <div class="plan-box">
      <div
        class="plan-item"
        v-for="(item, index) in plansList"
        :key="`${item.detail?.id}_${index}`"
      >
        <h3 class="plan-title">{{ item.detail?.work_title }}</h3>
        <p class="plan-description">{{ item.detail?.task_description }}</p>
        <span class="plan-date"
          ><svg-icon class="mr-8px" icon-class="date" />{{
            item.detail?.work_date
          }}</span
        >
        <ul class="plan-actions" v-if="item.logs?.length">
          <li
            class="plan-actions-item"
            v-for="(citem, cindex) in item.logs"
            :key="`${citem.id}_${cindex}`"
          >
            <h3 class="plan-actions-item-name">{{ citem.employee_name }}</h3>
            <p class="plan-actions-item-description">{{ citem.log_remark }}</p>
            <span class="plan-actions-item-date">{{ citem.log_time }}</span>
            <div
              class="plan-actions-item-img-list"
              v-if="citem.log_photo?.length"
            >
              <el-image
                style="width: 220px; height: 154px"
                :src="img"
                :zoom-rate="1.2"
                :max-scale="7"
                :min-scale="0.2"
                :preview-src-list="citem.log_photo"
                :initial-index="index"
                v-for="(img, imgindex) in citem.log_photo"
                :key="imgindex"
                fit="cover"
              />
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { TaskPlans, PlansList } from "@/api/task/model";
const props = withDefaults(
  defineProps<{
    data: TaskPlans[] | undefined;
  }>(),
  {
    data: () => {
      return [];
    },
  }
);
const plansList = ref<PlansList[]>([]);
watchEffect(() => {
  plansList.value = [];
  props.data.forEach((item) => {
    plansList.value = plansList.value.concat(item?.list as PlansList[]);
  });
});
</script>

<style lang="scss" scoped>
/* @import url(); 引入公共css类 */
.plan-box {
  display: flex;
  width: 100%;
  overflow-x: auto;
  .plan-item {
    flex-shrink: 0;
    width: 284px;
    height: 716px;
    background-color: #f0f5ff;
    border-radius: 16px;
    padding: 24px 16px;
    box-sizing: border-box;
    margin-right: 16px;
    &:last-child {
      margin-right: 0;
    }
    .plan-title {
      margin: 0;
      color: #323233;
      font-size: 14px;
      font-weight: 900;
      line-height: 22px;
      overflow: hidden; /* 隐藏超出的内容 */
      white-space: nowrap; /* 不换行 */
      text-overflow: ellipsis; /* 超出部分显示省略号 */
    }
    .plan-description {
      margin: 8px 0;
      color: #969799;
      font-size: 12px;
      font-weight: 500;
      line-height: 22px;
      height: 44px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }
    .plan-date {
      color: #4e6bef;
      font-size: 12px;
      font-weight: 900;
      line-height: 22px;
    }
    .plan-actions {
      box-sizing: border-box;
      height: 548px;
      overflow: hidden;
      overflow-y: auto;
      margin-top: 16px;
      border-top: 5px solid #4e6bef;
      background-color: #fff;
      width: 100%;
      padding: 0 16px 16px;
      &-item {
        padding-top: 18px;
        &-name {
          margin: 0 0 8px;
          color: #323233;
          font-size: 14px;
          font-style: normal;
          font-weight: 900;
          line-height: 22px;
        }
        &-description {
          color: #969799;
          margin-bottom: 8px;
          font-size: 12px;
          font-style: normal;
          font-weight: 500;
          line-height: 22px;
        }
        &-date {
          color: #969799;
          font-size: 12px;
          font-weight: 500;
          line-height: 22px;
        }
        &-img-list {
          margin-top: 8px;
          &.img-item {
            display: block;
            width: 100%;
            margin-top: 8px;
          }
        }
      }
    }
  }
}
</style>
